<template>
    <MyDialog :model-value="true" :type="DialogType.C3" title="钢丝绳详情 - 检测记录（最近一次）" top="1%" height="calc(100% - 50px)" @close="onClose">
        <!-- <div class="rowTitle">检测记录（最近一次）</div> -->
        <el-row>
            <el-col :span="8" class="padr-50">
                <!--  斜边 a² + b² = c² -->
                <!--  弧边  πr * 圆心角/180 -->
                <div id="wrap">
                    <template v-for="(item, index) in dotArr" :key="index">
                        <div class="dot" :style="'left:' + item.x + 'px; top:' + item.y + 'px;'" :tips="'位置：' + item.position + 'm <br/> 断丝数：' + item.num" @mouseenter="mouseenterFun" @mouseleave="mouseleaveFun"></div>
                    </template>
                    <div class="startDot dot" :style="'left:' + startDot.x + 'px; top:' + startDot.y + 'px;'" tips="起始位" @mouseenter="mouseenterFun" @mouseleave="mouseleaveFun" v-if="startDot"></div>
                </div>
            </el-col>
            <el-col :span="16">
                <el-button class="fr" style="position: relative; top: 4px; right: 4px; z-index: 100" type="warning" @click="onExport">导出</el-button>
                <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="default">
                        <el-form ref="StatusMonitorDetailFormRef" label-width="100" :model="thisData" disabled>
                            <div class="rowTitle">检测信息</div>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="检测类型" prop="type">
                                        <EnumSelect class="w-100" :enums="Enums.Check_Type" v-model:id="thisData.type"></EnumSelect>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="检测单位" prop="checkUnit">
                                        <el-input v-model="lastCheckWireropeModel.checkUnit" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="检测人员" prop="checkUserName">
                                        <el-input v-model="lastCheckWireropeModel.checkUserName" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="检测日期" prop="checkDate">
                                        <el-date-picker class="w-100" v-model="lastCheckWireropeModel.checkDate" type="date" />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="下次检测日期" prop="nextCheckDate">
                                        <el-date-picker class="w-100" v-model="lastCheckWireropeModel.nextCheckDate" type="date" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="是否建议更换">
                                        <el-radio-group v-model="lastCheckWireropeModel.isSuggestChange" class="ml-4">
                                            <el-radio :label="false" size="default">否</el-radio>
                                            <el-radio :label="true" size="default">是</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <div class="rowTitle">钢丝绳信息</div>
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="钢丝绳编码" prop="code">
                                        <el-input v-model="thisData.code" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="在用绳名称" prop="name">
                                        <el-input v-model="thisData.name" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="规格型号" prop="guiGe">
                                        <el-input v-model="thisData.guiGe" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="公称直径" prop="diameter">
                                        <el-input v-model="thisData.diameter" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="制造单位" prop="producerName">
                                        <el-input v-model="thisData.producerName" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="使用单位" prop="department_Name">
                                        <el-input v-model="thisData.department_Name" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="提升机用途" prop="hoisterUsageName">
                                        <el-input v-model="thisData.hoisterUsageName" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="钢丝绳类型" prop="wireropeTypeName">
                                        <el-input v-model="thisData.wireropeTypeName" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="安装日期" prop="installDate">
                                        <el-date-picker class="w-100" v-model="thisData.installDate" type="date" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="安装长度" prop="installLengthNum">
                                        <el-input v-model="thisData.installLengthNum" maxlength="50"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="安全运行时长" prop="dayNum">
                                        <el-input v-model="thisData.dayNum" maxlength="50">
                                            <template #append>天</template>
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="上次维保日期" prop="doDate">
                                        <el-date-picker class="w-100" v-model="thisData.lastUsingWireropeKeepModel.doDate" type="date" v-if="thisData.lastUsingWireropeKeepModel" />
                                        <el-date-picker class="w-100" type="date" v-else />
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="上次检测日期" prop="checkDate">
                                        <el-date-picker class="w-100" v-model="lastCheckWireropeModel.checkDate" type="date" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-tab-pane>
                    <template v-for="(item, index) in lastCheckWireropeModel.checkWireropeDetailModels">
                        <el-tab-pane :label="item.sortNo + '号绳'" :name="item.sortNo">
                            <el-form ref="checkWireropeFormRef" label-width="130" :model="thisData">
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="绳名称" prop="name">
                                            <el-input v-model="item.name" disabled maxlength="50"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="附件">
                                            <ButtonImage v-model="item.attr_FilesList" appendToBody readonly type="primary" text="查看"></ButtonImage>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <div class="titWarp">
                                    <div class="rowTitle">断丝</div>
                                    <el-button type="primary" @click="onShowDataEntry(item, 1)">查看数据</el-button>
                                </div>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="捻距内断丝数" prop="dsCnt">
                                            <el-input v-model="item.dsCnt" disabled maxlength="50"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="位置">
                                            <el-button type="primary" @click="onShowLookPosition(item)">查看</el-button>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="捻距内新增断丝数">
                                            <el-input v-model="item.dsCntAdd" disabled></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="新增断丝总数">
                                            <el-input v-model="item.allCntAdd" disabled></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="LA" prop="dsLa">
                                            <div class="infoBox">
                                                <el-input v-model="item.dsLa" disabled maxlength="50">
                                                    <template #append>%</template>
                                                </el-input>
                                                <el-tooltip :content="thisData.laRemark" placement="top">
                                                    <el-icon v-if="thisData.laRemark"><QuestionFilled /></el-icon>
                                                </el-tooltip>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <div class="titWarp">
                                    <div class="rowTitle">直径</div>
                                    <el-button type="primary" @click="onShowDataEntry(item, 2)">查看数据</el-button>
                                </div>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="位置" prop="zjPosition">
                                            <el-input v-model="item.zjPosition" disabled maxlength="50">
                                                <template #append>m</template>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="DIA" prop="zjDia">
                                            <div class="infoBox">
                                                <el-input v-model="item.zjDia" disabled maxlength="50">
                                                    <template #append>%</template>
                                                </el-input>
                                                <el-tooltip :content="thisData.diaRemark" placement="top">
                                                    <el-icon v-if="thisData.diaRemark"><QuestionFilled /></el-icon>
                                                </el-tooltip>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <div class="titWarp">
                                    <div class="rowTitle">金属截面损失</div>
                                </div>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="位置" prop="jsjmPosition">
                                            <el-input v-model="item.jsjmPosition" disabled maxlength="50">
                                                <template #append>m</template>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="LMA" prop="jsjmLma">
                                            <div class="infoBox">
                                                <el-input v-model="item.jsjmLma" disabled maxlength="50">
                                                    <template #append>%</template>
                                                </el-input>
                                                <el-tooltip :content="thisData.lmaRemark" placement="top">
                                                    <el-icon v-if="thisData.lmaRemark"><QuestionFilled /></el-icon>
                                                </el-tooltip>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <div class="titWarp">
                                    <div class="rowTitle">捻距变化</div>
                                </div>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="捻距" prop="nianJu">
                                            <el-input v-model="item.nianJu" disabled maxlength="50">
                                                <template #append>mm</template>
                                            </el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="LL" prop="nianJuChange">
                                            <div class="infoBox">
                                                <el-input v-model="item.nianJuChange" disabled maxlength="50">
                                                    <template #append>%</template>
                                                </el-input>
                                                <el-tooltip :content="thisData.nianJuRemark" placement="top">
                                                    <el-icon v-if="thisData.nianJuRemark"><QuestionFilled /></el-icon>
                                                </el-tooltip>
                                            </div>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <div class="titWarp">
                                    <div class="rowTitle">其他</div>
                                </div>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="腐蚀情况" prop="othFuShi">
                                            <el-input v-model="item.othFuShi" disabled maxlength="50"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="磨损情况" prop="othMoSun">
                                            <el-input v-model="item.othMoSun" disabled maxlength="50"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="其他损伤" prop="othQiTa">
                                            <el-input v-model="item.othQiTa" disabled maxlength="50"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="综合判定" prop="othZongHe">
                                            <el-input v-model="item.othZongHe" disabled maxlength="50"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-tab-pane>
                    </template>
                </el-tabs>
            </el-col>
        </el-row>
        <!-- 数据录入 -->
        <DataEntry ref="DataEntryRef" v-if="isShowDataEntry" @close="onCloseDetail"></DataEntry>
        <LookPosition ref="LookPositionRef" v-if="isShowLookPosition" @close="onCloseDetail"></LookPosition>
        <template #footer>
            <!-- <el-button type="primary" @click="onSave">保存</el-button> -->
        </template>
    </MyDialog>
</template>

<script lang="ts" setup>
import Enums from "@/gx/Enums";
import Gx from "@/gx/Gx";
import { FormRules } from "element-plus";
import LAY_EXCEL from "lay-excel";
import { DatePart, DialogType } from "@/_gx/TsEnums";
import DataEntry from "./DataEntry.vue";
import LookPosition from "./LookPosition.vue";
import pointComputed from "@/gx/pointComputed";

const activeName = ref("default");
//定义当前页面数据对象
const thisData = ref<any>({});
//最后一次监测信息
const lastCheckWireropeModel = ref<any>({});
//点位标记数据
const dotArr = ref([]);
//起始位信息
const startDot = ref({ x: 0, y: 0 });

//切换tab项
const handleClick = (tab, event) => {
    dotArr.value = [];
    if (tab.index > 0) {
        if (lastCheckWireropeModel.value && lastCheckWireropeModel.value.checkWireropeDetailModels && lastCheckWireropeModel.value.checkWireropeDetailModels[tab.index - 1]) {
            let arr = lastCheckWireropeModel.value.checkWireropeDetailModels[tab.index - 1].dataEntryList;
            for (var i = 0; i < arr.length; i++) {
                let item = arr[i];
                let location = pointComputed[thisData.value.ApiName](thisData.value.installLengthNum, item.position);
                item.x = location.x;
                item.y = location.y;
            }
            dotArr.value = arr;
        }
    }
};

//初始化
const Init = (autoID) => {
    App.CallApi(Api.UsingWirerope.GetStatusMonitorByID(autoID), {
        success: (res) => {
            thisData.value = res;

            //图片点位基础信息
            getHoisterInfo(res.hoisterModel, res.wireropeTypeName);

            //计算安全运行时长
            let dayNum = Gx.DateDiff(DatePart.Day, res.installDate, Gx.GetDateTime());
            res.dayNum = dayNum;

            //循环绳子过滤类型
            for (var i = 0; i < res.lastCheckWireropeModel.checkWireropeDetailModels.length; i++) {
                let item = res.lastCheckWireropeModel.checkWireropeDetailModels[i];
                item.dataEntryList = item.checkWireropeDetailDataModels.filter((x) => x.type == Enums.DataEntry_Type.断丝);
                item.lookPositionList = item.checkWireropeDetailDataModels.filter((x) => x.type == Enums.DataEntry_Type.直径);
            }
            lastCheckWireropeModel.value = res.lastCheckWireropeModel;
        },
    });
};

//导出
const onExport = () => {
    App.CallApi(Api.UsingWirerope.ExportLastCheckExcel(thisData.value.usingWireropeID), {
        success: (res) => {
            window.open(res);
        },
    });
};

/********************************************** 点位标记 **********************************************/

// 图片点位基础信息
const getHoisterInfo = (hoisterModel, wireropeTypeName) => {
    //钢丝绳编码
    let hoisterCode = hoisterModel.code;
    //清空点位
    dotArr.value = [];

    // 设置背景图片
    if (hoisterModel.pic_ImgsList && hoisterModel.pic_ImgsList[0] && hoisterModel.pic_ImgsList[0].url) {
        nextTick(() => {
            let wrapDom = document.getElementById("wrap");
            wrapDom.style.background = `url("${hoisterModel.pic_ImgsList[0].url}")`;
            wrapDom.style.backgroundSize = "100% 100%";
            wrapDom.style.backgroundRepeat = "no-repeat";
        });
    }
    // 设置起点位置
    switch (hoisterCode) {
        case "TSJ001":
            if (wireropeTypeName.indexOf("首") != -1) {
                startDot.value.x = 275;
                startDot.value.y = 291;
                thisData.value.ApiName = "pointLocationHead1";
                break;
            }
            if (wireropeTypeName.indexOf("尾") != -1) {
                startDot.value.x = 179;
                startDot.value.y = 223;
                thisData.value.ApiName = "pointLocationEnd1";
                break;
            }
        case "TSJ002":
            if (wireropeTypeName.indexOf("首") != -1) {
                startDot.value.x = 213;
                startDot.value.y = 228;
                thisData.value.ApiName = "pointLocationHead2";
                break;
            }
            if (wireropeTypeName.indexOf("尾") != -1) {
                startDot.value.x = 212;
                startDot.value.y = 262;
                thisData.value.ApiName = "pointLocationEnd2";
                break;
            }
        case "TSJ003": //架空乘人装置
            startDot.value.x = 415;
            startDot.value.y = 209;
            thisData.value.ApiName = "pointLocation3";
            break;
        case "TSJ004": //立井单箕斗缠绕
            startDot.value.x = 331;
            startDot.value.y = 124;
            thisData.value.ApiName = "pointLocation4";
            break;
        case "TSJ005": //立井双箕斗缠绕
            if (wireropeTypeName.indexOf("上") != -1) {
                startDot.value.x = 316;
                startDot.value.y = 137;
                thisData.value.ApiName = "pointLocationHead5";
                break;
            }
            if (wireropeTypeName.indexOf("下") != -1) {
                startDot.value.x = 290;
                startDot.value.y = 175;
                thisData.value.ApiName = "pointLocationEnd5";
                break;
            }
        case "TSJ006":
            //斜井缠绕式提升
            if (wireropeTypeName.indexOf("上") != -1) {
                startDot.value.x = 22;
                startDot.value.y = 245;
                thisData.value.ApiName = "pointLocationBegin6";
                break;
            }
            if (wireropeTypeName.indexOf("下") != -1) {
                startDot.value.x = 38;
                startDot.value.y = 281;
                thisData.value.ApiName = "pointLocationEnd6";
                break;
            }
    }
};

//设置起始位位置
const getStartLocation = () => {};

//鼠标经过
const mouseenterFun = (e) => {
    // 创建浮层元素并设置样式

    let createDivDom = document.createElement("div");
    createDivDom.style.overflow = "auto";
    createDivDom.style.position = "absolute";
    createDivDom.style.background = "#fff";
    createDivDom.style.color = "#666";
    createDivDom.style.boxShadow = "rgba(168, 168, 168, 0.295) 1px 2px 10px";
    createDivDom.style.borderRadius = "5px";
    createDivDom.style.padding = "10px";
    createDivDom.style.display = "inline-block";
    createDivDom.style.fontSize = "14px";
    createDivDom.style.zIndex = "999";
    // 设置id方便寻找
    createDivDom.setAttribute("id", "vc-tooltip"); // 将浮层插入到body中
    document.body.appendChild(createDivDom); // 浮层中的文字 通过属性值传递动态的显示文案
    document.getElementById("vc-tooltip").innerHTML = e.target.getAttribute("tips");

    // 鼠标移动时，动态修改浮沉的位置属性
    let tipDom = document.getElementById("vc-tooltip");

    tipDom.style.top = e.clientY + 15 + "px";
    tipDom.style.left = e.clientX + 15 + "px";
};
//鼠标移出
const mouseleaveFun = () => {
    // 找到浮层元素并移出
    let tipDom = document.getElementById("vc-tooltip");
    tipDom && document.body.removeChild(tipDom);
};

/********************************************** 详情 **********************************************/
//是否显示详情对话框
const isShowDataEntry = ref(false);
const isShowLookPosition = ref(false);
//详情对话框Ref对象
const DataEntryRef = ref(null);
const LookPositionRef = ref(null);

//显示详情
const onShowDataEntry = (data, type) => {
    isShowDataEntry.value = true;
    nextTick(() => {
        DataEntryRef.value.InitDataEntry(data.name, type == Enums.DataEntry_Type.断丝 ? data.dataEntryList : data.lookPositionList, type);
    });
};
const onShowLookPosition = (data) => {
    isShowLookPosition.value = true;
    nextTick(() => {
        LookPositionRef.value.InitLookPosition(data.name, data.checkWireropeDetailPositionModels);
    });
};

//关闭详情
const onCloseDetail = () => {
    isShowDataEntry.value = false;
    isShowLookPosition.value = false;
};

//关闭
const onClose = () => {
    emits("close", false);
};

//向上抛出的事件与方法
const emits = defineEmits(["close"]);
defineExpose({ Init });
</script>

<style lang="scss">
.el-row {
    width: 100%;
}
.titWarp {
    display: flex;
    align-items: center;
    padding-bottom: 6px;
    .rowTitle {
        min-width: 90px;
    }
}
.el-tabs {
    box-sizing: border-box;
}

#wrap {
    width: 452px;
    height: 600px;
    // background: url("../../../src/assets/img/c1.jpg");
    // background-size: 100% 100%;
    // background-repeat: no-repeat;
    position: relative;
}
.dot {
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    color: white;
    line-height: 10px;
    text-align: center;
    font-size: 8px;
    position: absolute;
    z-index: 999;
}
.startDot {
    background-color: #065cc3;
}

.infoBox {
    width: 100%;
    display: flex;
    align-items: center;
    .el-icon {
        font-size: 20px;
        padding-left: 6px;
    }
}
</style>
